<template>
  <div class="entry-list-container">
    <ClientOnly>
      <!-- 数据列表 start-->
      <div class="entry-list-wrap">
        <ul class="entry-list" v-if="dataList?.length">
          <li class="item" v-for="item in dataList" :key="item.id">
            <div class="entry">
              <div class="meta-container">
                <div class="date">更新:{{$moment.utcTransLocaleDate(item.updateTime || item.createTime)}}</div>
                <div class="date">创建:{{$moment.utcTransLocaleDate(item.createTime)}}</div>
              </div>
              <div class="content-wrapper">
                <div class="content-main">
                  <div class="title-row">
                    <NuxtLink :to="`/article/new?id=${item.id}`" class="title" :alt="item.title">{{item.title}}</NuxtLink>
                    <n-button text color="red" @click.stop="deleteDrafts(item.id)">
                      <!--<template #icon>-->
                      <!--<n-icon>-->
                      <!--<cash-icon />-->
                      <!--</n-icon>-->
                      <!--</template>-->
                      删除
                    </n-button>
                    <!--                    <ClientOnly>-->
                    <!--                      <publish-popver :draftId="item.id"></publish-popver>-->
                    <!--                    </ClientOnly>-->
                  </div>
                </div>
                <!--<img :src="item.thumbUrl" class="thumb">-->
              </div>
            </div>
          </li>
        </ul>
        <NEmpty v-else :description="NO_DATA_FOUND_TEXT"/>
      </div>
      <!-- 数据列表 end-->
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
  import {NO_DATA_FOUND_TEXT} from '~/common/constants'

  defineProps({
    dataList: {
      type: Array<Object>,
      require: true,
      default: () => []
    }
  })
  const nuxtApp = useNuxtApp()
  const emit = defineEmits(['delete'])
  function deleteDrafts(id) {
    // DELETE /editor/drafts/article/{id} 删除草稿接口
    nuxtApp.$mutual['dialog'].warning({
      title: '提示',
      content: '确定删除？',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: async () => {
        const {data, msg} = await nuxtApp.$request(`/editor/drafts/article/${id}`,{
          method: 'DELETE',
          server: true,
          key: 'deleteDraftsById'
        }).catch(e => {
          // nuxtApp.$mutual['notification'].error({
          //   content: e.message,
          //   duration: 5000
          // })
        })
        nuxtApp.$mutual['notification'].success({
          content: msg,
          duration: 3000
        })
        emit('delete', id)
      },
      onNegativeClick: () => {
      }
    })
  }
</script>

<style scoped lang="scss">
  .entry-list-container {
    background-color: var(--tidy-layer-1);
    border-radius: 4px;
    .entry-list {
      position: relative;
      width: 100%;
      background-color: var(--tidy-layer-1);
      .item {
        .entry {
          cursor: pointer;
          position: relative;
          background: var(--tidy-layer-1);
          padding: 12px 20px 0;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          .meta-container {
            display: flex;
            align-items: center;
            color: var(--tidy-font-3);
            .user-message {
              display: flex;
              align-items: center;
              margin-right: 12px;
              max-width: 162px;
              font-size: 13px;
              line-height: 22px;
              color: var(--tidy-font-2);
              @include text-overflow;
              .user-popover {
                display: inline;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .popover-box {
                display: flex;
                align-items: center;
              }
            }
            .date {
              position: relative;
              line-height: 22px;
              font-size: 13px;
              flex-shrink: 0;
              &:not(:first-child), &:not(:last-child) {
                padding: 0 12px;
              }
              &:first-child {
                padding-left: 0;
              }
              &:not(:first-child):before,&:not(:last-child):after{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                display: block;
                width: 1px;
                height: 12px;
                background: var(--tidy-gray-1-1);
                content: " ";
              }
              &:not(:first-child):before {
                left: 0;
              }
              &:not(:last-child):after{
                right: 0;
              }
            }
          }
          .content-wrapper {
            display: flex;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--tidy-gray-1-1);
            margin-top: 10px;
            width: 100%;
            .content-main {
              flex: 1 1 auto;
              .title-row {
                display: flex;
                margin-bottom: 8px;
                button {
                  margin-left: 8px;
                }
                .title {
                  font-weight: 600;
                  font-size: 16px;
                  line-height: 24px;
                  color: var(--tidy-font-1);
                  width: 100%;
                  display: -webkit-box;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 1;
                }
              }
              .abstract {
                margin-bottom: 8px;
                a {
                  color: var(--tidy-font-3);
                  font-size: 13px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
